import { useState, useRef } from 'react'
import { useGesture } from '@use-gesture/react'
import Timeline2 from './TimeLine2'
import TrackList from './trackList'
import { throttle } from 'lodash'

function App() {
    const [scale, setScale] = useState(8)
    const [width, setWidth] = useState(0)
    const [duration, setDuration] = useState(45.5)
    const containerRef = useRef<HTMLDivElement>(null)
    const cellWidth = useRef<number>(0)
    // const gridWidth = 50

    // 计算时间轴宽度
    // useEffect(() => {
    //     const { interval, frameInterval } = getIntervalAndframe(scale)
    //     let length = 0
    //     let length2 = 0
    //     for (let i = 0; i <= duration; i += interval) {
    //         length++
    //         if (i === 0) {
    //             length2++
    //         }
    //         if (frameInterval && i < duration) {
    //             for (let f = frameInterval; f < 30; f += frameInterval) {
    //                 length++
    //                 if (i === 0) {
    //                     length2++
    //                 }
    //             }
    //         }
    //     }
    //     // 总宽度
    //     const width = (length * 2 - 1) * cellWidth.current
    //     console.log(width)
    //     // 每秒的宽度
    //     secondWidth.current = length2 * 2 * cellWidth.current
    //     setWidth(width)
    // }, [scale, duration])

    const handlePinch = throttle(({ active, offset: [x] }) => {
        if (active) {
            const clampedScale = Math.min(Math.max(1, Math.round(x)), 16)
            setScale(clampedScale)
        }
    }, 50)

    // 双指缩放手势处理
    useGesture(
        {
            onPinch: handlePinch,
        },
        {
            target: containerRef,
            eventOptions: { passive: false },
            // 初始化放大倍数
            pinch: { scaleBounds: { min: 1, max: 8 }, rubberband: true, from: () => [scale, 0] },
        }
    )

    const getWidth = (w: number, cell: number) => {
        cellWidth.current = cell
        setWidth(w)
    }

    return (
        <div
            ref={containerRef}
            style={{
                padding: '20px',
                background: '#000',
                overflowX: 'scroll',
                overflowY: 'hidden',
                boxSizing: 'border-box',
                width: '100vw',
                // touchAction: 'none',
            }}
        >
            <div style={{ display: 'inline-block', width: width + 'px', transition: 'width .1s ease' }}>
                <Timeline2 callBack={getWidth} scale={scale} duration={duration} />
                <TrackList secondWidth={cellWidth.current} />
                <div style={{ color: '#fff', backgroundColor: 'pink', width: width }}>视频</div>
            </div>
        </div>
    )
}

export default App
